<template>
    <div class="edu-page-warp">
    <div class="edu-opertion-bar">
        <div class="float-right">
            <el-button type="text"
                        @click="backToMain">{{ $t('score.goback') }}</el-button>
        </div>
      </div>
    <div class="previewPanel">
        <h3 class="float-left">{{ $t('英文成绩单预览') }}</h3>
        <el-button
            v-if="isShow"
            class="float-right"
            @click="englishTranscriptExport">{{ $t('common.btn.export') }}</el-button>
        <el-button style="float: right; margin: 0 10px 0 0;" v-print="printObj" type="primary">打印</el-button>
    </div>
    <div class="previewPage" id="printMe" v-for="(item, index) in tableList" :key="index">
        <div class="previewPageInner">
            <div class="previewPageTitle">Undergraduate Student's {{ item.advancedLevelCode === '10002' ? 'Micro Professional' : (item.advancedLevelCode === '10003' ? 'Minor professional' : 'Minor Degree') }} Academic Record</div>
            <div class="tableStyle">
                <table class="topTable">
                    <tr>
                        <td  rowspan="4" style="min-width:100px"></td>
                        <td style="min-width:80px">Name:{{item.studentNameEn}}</td>
                        <td style="min-width:120px">Student ID:{{ item.studentId }}</td>
                        <td style="min-width:70px">Sex:{{ item.sexI18n}}</td>
                        <td style="min-width:120px">Birthdate:{{ item.birth}}</td>
                    </tr>
                    <tr>
                        <td style="min-width:330px">College:{{ item.facultyI18n }}</td>
                        <td colspan="3" scope="col">Major:{{ item.professionI18n }}</td>
                    </tr>
                    <tr>
                        <td style="min-width:330px">MinorFaculty:{{ item.minorFacultyI18n }}</td>
                        <td colspan="3" scope="col">{{ item.advancedLevelCode === '10002' ? 'Micro Professional' : (item.advancedLevelCode === '10003' ? 'Minor professional' : 'Minor Degree') }}:{{ item.minorProfessionI18n }}</td>
                    </tr>
                    <tr>
                        <td style="min-width:80px">MinorAdmissionTime:{{ item.entranceTerm}}</td>
                        <td colspan="3" scope="col">MinorLengthOfSchool:{{ item.minorLengthOfSchool }}</td>
                    </tr>
                </table>
            </div>
            <div class="middleDiv">
                <div style="width:50%;margin-right:20px;">
                    <table class="middleTable" cellSpacing="0" >
                        <tr>
                            <td style="min-width:40%;font-weight:bold;border-bottom:2px solid black;">Courses</td>
                            <td style="min-width:10%;font-weight:bold;border-bottom:2px solid black;">Credits</td>
                            <td style="min-width:10%;font-weight:bold;border-bottom:2px solid black;">Score</td>
                            <td style="min-width:40%;font-weight:bold;border-bottom:2px solid black;">Term</td>
                        </tr>
                        <tr v-for="(item1, index1) in isOdd(item.scoreDetailList)"
                            :key="index1">
                            <td :class="item1.isBolden ? 'isBolden': ''">{{ item1.courseNameEn }}</td>
                            <td>{{ item1.credit }}</td>
                            <td>{{ item1.scoreValueEn }}</td>
                            <td>{{ item1.calendarYearTermCn }}</td>
                        </tr>
                    </table>
                </div>
                <!-- <div style="width:20px"></div> -->
            <div style="width:50%;">
                <table class="middleTable" cellSpacing="0" >
                    <tr>
                        <td style="min-width:40%;font-weight:bold;border-bottom:2px solid black;">Courses</td>
                        <td style="min-width:10%;font-weight:bold;border-bottom:2px solid black;">Credits</td>
                        <td style="min-width:10%;font-weight:bold;border-bottom:2px solid black;">Score</td>
                        <td style="min-width:40%;font-weight:bold;border-bottom:2px solid black;">Term</td>
                    </tr>
                    <tr v-for="(item1,index1) in isEven(item.scoreDetailList)"
                        :key="index1">
                        <td :class="item1.isBolden ? 'isBolden': ''">{{ item1.courseNameEn }}</td>
                        <td>{{ item1.credit }}</td>
                        <td>{{ item1.scoreValueEn }}</td>
                        <td>{{ item1.calendarYearTermCn }}</td>
                    </tr>
                </table>
            </div>
            </div>
            <div class="tableStyle borderBottom2">
                <table class="bottomTable">
                    <tr>
                        <td>Enrolled Credits:{{ item.creditAll }}</td>
                        <td>Earned Credits:{{ item.creditPassed }}</td>
                        <td>GPA:{{ item.averagePoint }}</td>
                        <td>Equivalent to a 100-point score：{{ item.hundredPointScore }}</td>
                    </tr>
                </table>
            </div>
            <div class="divStyle">
                <div style="width:34%;float:right;">
                    <p>Undergraduate School of Tongji University</p>
                    <p>Print Date:<span>{{item.printDate}}</span></p>
                </div>
                <div style="width:38%;float:right;">
                    <label>Dean:</label>
                    <span>{{ item.faucltyManager  }}</span>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import scoreManagementApi from 'common/src/api/scoreManagement/scoreManagement';
export default {
    name: 'preview-chinese-score-blanket',
    props:{
        englishScoremessage:{
            default:{},
        }
    },
    data() {
        return {
            printObj: {
                id: '#printMe',
                popTitle: '',
                extraHead:
                    '<meta http-equiv="Content-Language"content="zh-cn"/>,<style>  #printMe { width: 100%; !important; } <style>',
                extraCss: 'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
            },
            studentInfo: {},
            scoreList: [],
            englishScoremessage: this.englishScoremessage,
            tableList: [],
            isShow: true
        };
    },
    mounted() {
      this.initPreviewPage();
    },
    methods: {
        async initPreviewPage() {
            let param = {
                studentId: this.englishScoremessage.studentId,
                minorFaculty: this.englishScoremessage.minorFaculty,
                minorProfession: this.englishScoremessage.minorProfession,
                language: 'en',
                advancedLevel: this.englishScoremessage.advancedLevelCode
            };
            try{
                let tableDatas = await scoreManagementApi.getScorePreview(param);
                if(tableDatas.code === 200) {
                    this.tableList = tableDatas.data
                }
            } catch (err) {
                this.isShow = false;
            }
        },
        // 学生成绩导出
        englishTranscriptExport() {
            let param = {
                studentId: this.englishScoremessage.studentId,
                minorFaculty: this.englishScoremessage.minorFaculty,
                minorProfession: this.englishScoremessage.minorProfession,
                language: 'en',
                advancedLevel: this.englishScoremessage.advancedLevelCode
            };
            scoreManagementApi.exportMinorStudentScorePrint(param);
        },
        backToMain() {
            this.$emit('back')
        },
        isEven(list) {
            return list.filter((val, item) =>{
                return item % 2 == 0
            })
        },
        isOdd(list){
            return list.filter((val, item) =>{
                return item % 2 != 0
            })
        }
    }
};
</script>
<style scoped>
.previewPanel {
    width: 800px;
    margin: 10px auto;
    height: 32px;
    font-family: 'Times New Roman';
}
.previewPage {
    clear: both;
    width: 800px;
    margin: 0 auto 30px;
    background: #fff;
}
.float-right {
    float: right;
}
.float-left {
    float: left;
    margin-bottom: 0;
    line-height: 30px;
}
.previewPageInner {
    width: 90%;
    clear: both;
    margin: 0 auto;
    height: 90%;
    padding: 30px 0;
}
.previewPageTitle {
    text-align: center;
    padding-right: 10px;
    width: 100%;
    height: 80px;
    line-height: 90px;
    font-size: 24px;
    font-family: 'Times New Roman';
}
.tableStyle {
    width: 100%;
    padding: 4px 0;
}
.boderBottom {
    border-bottom: 2px solid #000;
}
.borderBottom2 {
    border-bottom: 2px solid #000;
    border-top: 2px solid #000;
}
.middleDiv {
    width: 100%;
    padding: 20px 0 40px;
    display: flex;
    min-height: 450px;
}
.divStyle {
    width: 100%;
    padding-top: 20px;
    height: 60px;
    font-size: 10px;
}
.topTable,
.bottomTable {
    width: 100%;
    font-size: 10px;
}
.topTable{
  height: 15px;
  line-height: 15px;
}
/* .topTable td:nth-of-type(odd), .bottomTable td:nth-of-type(odd){
    font-weight: bold;
} */
.middleTable {
    width: 100%;
    font-size: 10px;
}
.middleTable tr {
    height: 18px;
    line-height: 18px;
}
.divStyle p {
    margin: 2px 0;
    font-weight: bold;
    text-align: center;
}

.divStyle label{
    font-weight: bold;
}
.previewPanel p {
    margin: 2px 0;
}
.isBolden {
    font-weight: bold;
}
</style>
